<template>
	<view>
		<view class="menu-cata">
			<view class="top">
				<img class="banner" :src="MenuCataList.pic" />
				<text class="title">{{MenuCataList.title}}</text>
			</view>
			<view class="middle">
				<text class="summary">{{MenuCataList.desc}}</text>
				<view class="desc">
					<text class="tips"><text class="meishi">美食</text>{{MenuCataList.foodQty}}种</text>
					<view class="like">
						<text class="like">like</text>
						<text class="catch">catch</text>
					</view>
				</view>
				<view class="food-list" v-for="(f,i) in MenuCataList.foodList" :key="i" @click="goFood(f.foodId)">
					<img class="food-pic" :src="f.picture" alt="">
					<view class="food-desc">
						<view class="name">{{f.name}}</view>
						<view class="mater">
							{{f.materialStr}}
						</view>
						<view class="desc">
							<text class="like">{{f.loves}}喜欢</text>
							<text class="watch">{{f.hits}}浏览</text>
							<text class="catch">{{f.favorites}}收藏</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				MenuCataList: []
			}
		},
		methods: {

			getData() {
				uni.request({
					url: `https://appfly.cn/api/cookbookCommon/foodMenuDetail?menuId=${this.id}`,

					success: (res) => {
						this.MenuCataList = res.data.data
						// console.log(res.data);//输出
						console.log(this.MenuCataList);
					}
				});
			},

			goFood(id) {
				uni.navigateTo({
					url: `/pages/food/food?id=${id}`
				})
			}

		},
		onLoad(options) {
			this.id = options.id;
			this.getData()
			uni.setNavigationBarTitle({
				title: this.MenuCataList.title
			});
		}
	}
</script>

<style lang="scss">
	.menu-cata {
		padding: 10px 12px;

		.top {
			position: fixed;
			top: 0;
			z-index: 100;
			height: 200px;
			background-color: #fff;

			.banner {
				width: 93vw;
				height: 150px;
				border-radius: 8px;
			}

			.title {
				line-height: 40px;
				font-size: 20px;
				font-weight: 700;
			}
		}

		.middle {
			position: relative;
			top: 200px;
			z-index: 1;

			.summary {
				font-size: 14px;
				color: #999;
			}

			.desc {
				margin: 10px 0;
				display: flex;
				justify-content: space-between;

				.tips {
					font-size: 15px;
					color: #999;

					.meishi {
						font-size: 18px;
						font-weight: 700;
						color: black;
						margin-right: 10px;
					}
				}
			}

			.food-list {
				display: flex;
				margin-bottom: 20px;

				.food-pic {
					width: 35vw;
					height: 15vh;
					border-radius: 9px;
				}

				.food-desc {
					width: 53vw;
					padding-left: 5vw;


					.mater {
						height: 20px;
						font-size: 13px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #999;
					}

					.desc {
						font-size: 13px;
						color: #999;
					}
				}
			}
		}

	}
</style>
